<script setup>
import { useUserStore } from '@/stores'
import { userexit } from '/src/api/user.js'
import avatar from '@/assets/avatar.png'
import { useRouter } from 'vue-router'
import {
  // Iphone,
  // Tickets,
  Back,
  User,
  SwitchButton,
  CaretBottom,
  Edit,
  Goods,
  Wallet
} from '@element-plus/icons-vue'
const exit = async () => {
  //退出操作
  //清除本地的数据(token + user信息)
  await userexit()
  userStore.removeToken()
  userStore.setUser({})
  router.push('/login')
}
const userStore = useUserStore()
const router = useRouter()
const {
  user: { name, username, image }
} = useUserStore()
const profileback = () => {
  router.push('/layout')
}
const handleCommand = async (key) => {
  if (key === 'man') {
    ElMessage.success(`${name}`)
    // router.push(`/user/profile`)
  } else if (key === 'logout') {
    await ElMessageBox.confirm('你确认要退出吗？', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
    exit()
  } else {
    //跳转操作
    router.push(`/user/${key}`)
  }
}
</script>
<template>
  <el-container class="userProfile">
    <!-- header -->
    <!-- <el-header>
      <el-row>
        <el-col :span="3">
          <el-icon :size="30" @click="profileback">
            <Back />
          </el-icon>
        </el-col>
        <el-col :span="18" class="name">
          {{ name }}
        </el-col>
        <el-col :span="3"> -->
    <!--   Dropdowm 下拉菜单   -->
    <!-- <el-dropdown placement="bottom-end" @command="handleCommand">
            <span class="el-dropdown__box">
              <el-avatar
                size="large"
                style="margin: 1px"
                :src="image || avatar"
              />
              <el-icon :size="30">
                <CaretBottom />
              </el-icon>
            </span> -->
    <!-- 折叠的下拉部分 -->
    <!-- <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="man">
                  @{{ username }}
                </el-dropdown-item>
                <el-dropdown-item command="message" :icon="User"
                  >个人主页</el-dropdown-item
                >
                <el-dropdown-item command="goods" :icon="SwitchButton"
                  >管理商品</el-dropdown-item
                >
                <el-dropdown-item command="logout" :icon="SwitchButton"
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header> -->
    <div class="content">
      <el-menu
        :default-active="$route.path"
        class="profile-menu"
        text-color="#333"
        active-text-color="white"
        router
      >
        <div class="menu-header">
          <el-avatar :size="64" :src="image || avatar" />
          <h3>{{ name }}</h3>
          <p>@{{ username }}</p>
        </div>
        <el-menu-item index="/user/message">
          <el-icon>
            <User />
          </el-icon>
          <span>个人信息</span>
        </el-menu-item>
        <el-menu-item index="/user/change">
          <el-icon>
            <Edit />
          </el-icon>
          <span>修改信息</span>
        </el-menu-item>
        <el-menu-item index="/user/goods">
          <el-icon>
            <Goods />
          </el-icon>
          <span>管理商品</span>
        </el-menu-item>
        <el-menu-item index="/user/money">
          <el-icon>
            <Wallet />
          </el-icon>
          <span>我要充值</span>
        </el-menu-item>
      </el-menu>
      <!-- Main -->
      <el-main class="profile-main">
        <router-view></router-view>
      </el-main>
    </div>
  </el-container>
</template>
<style lang="scss" scoped>
@import '@/assets/main.scss';

.userProfile {
  .el-header {
    border-bottom: 3px gray solid;
    background-color: $color-primary;
    height: 75px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    .el-row {
      height: 100%;
      text-align: center;
      align-items: center;
    }
    .el-icon {
      cursor: pointer;
      transition: transform 0.3s;
      &:hover {
        transform: scale(1.1);
      }
    }

    .el-dropdown__box {
      cursor: pointer;
      .el-avatar {
        border: 2px solid rgba(255, 255, 255, 0.8);
        transition: transform 0.3s;

        &:hover {
          transform: scale(1.05);
        }
      }
    }

    .name {
      font-size: 20px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        color: #999;
        transform: scale(1.1);
      }
    }
  }

  .content {
    width: 100%;
    min-height: 100vh;
    display: flex;
    background-color: white;
    justify-content: center;
    .profile-menu {
      width: 200px;
      .menu-header {
        padding: 20px;
        text-align: center;
        border-bottom: 5px solid #f0f0f0;
        cursor: pointer;

        h3 {
          margin: 10px 0 5px;
          color: #333;
        }

        p {
          color: #999;
          margin: 0;
        }
      }

      .el-menu-item {
        display: flex;
        justify-content: center;
        padding: 0;
        margin: 4px 0;
        width: 100%;

        &:hover {
          background-color: aliceblue;
        }

        &.is-active {
          background-color: darken($color-primary, 15%);
          color: black;
        }

        .el-icon {
          font-size: 18px;
          margin-right: 12px;
          color: #666;
        }
      }
    }
  }

  .profile-main {
    :deep(.el-card) {
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      transition:
        transform 0.3s,
        box-shadow 0.3s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      }
    }
  }

  @media (max-width: 980px) {
    .content {
      .profile-menu {
        min-width: 180px;
        .el-menu-item {
          .el-icon {
            margin-right: 0px;
          }
        }
      }
    }
  }

  @media (max-width: 500px) {
    .content {
      margin: 0;
      flex-direction: column;
      width: 100%;
      .profile-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        .menu-header {
          display: none;
        }

        .el-menu-item {
          margin: 0;
          padding: 10px;
          width: 100%;
          height: 100%;
          .el-icon {
            margin: 0;
            font-size: 14px;
            color: #666;
          }

          span {
            font-size: 1px;
          }
        }
      }
    }
  }
}
</style>
